<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<title>湖南省自来水公司营销管理信息系统</title> 
	
	<link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title" />	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title" />	
	
	<link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title" />
	<link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title" />
	
	<link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
	<script src="../js/jquery/jquery-3.3.1.js"></script>
	<script src="/webjars/vue/2.5.17/dist/vue.js"></script>

	<script src="../js/bootstrap.min.js"></script>
	<script src="../layui/layui.all.js" type="text/javascript" ></script>
</head> 
 
<body> 

<div id="wrapper">

	<div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>


	<div id="content" class="xgrid" >

		<div class="x12">
			
			<h2>抄表情况统计报表</h2>
			
			<div class="searchDiv">
				抄表年月 <select class="medium" id="yearmonth">
				<option v-for="y in yearmonth" :value="y.readYear+','+y.readMonth">{{y.readYear}}{{y.readMonth}}</option>
			</select>
				
				<button class="btn btn-small btn-icon btn-find" @click="querybyYearMonth()"><span></span>查询</button>
			</div>
			<script>
				$(function () {
					setTimeout(function(){4
						var yearmonth=$("#yearmonth").val().split(",");
						$("#readyear").html(yearmonth[0]+''+yearmonth[1]);
					},500);
				})
			</script>
			
			<div class="reportTitle">
				抄表情况统计报表
			</div>	
			<div class="height24">
				<div style="float:left;width:200px;">抄表年月：<span id="readyear"></span></div>
			</div>
			<table class="report">
				<thead>
					<tr>
						<th>辖区</th>
						<th>表册</th>
						<th>抄表员</th>
						<th>应抄数</th>
						<th>实抄数</th>
						<th>未抄数</th>
						<th>复核数</th>
						<th>待复核数</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="v in volume">
						<td class="center" v-text="v.AreaName">加载中...</td>
						<td class="center" v-text="v.VolumeName">加载中...</td>
						<td class="center" v-text="v.EmpNmae">加载中...</td>
						<td class="right" v-text="v.sum">加载中...</td>
						<td class="right" v-text="v.already">加载中...</td>
						<td class="right" v-text="v.notnull">加载中...</td>
						<td class="right" v-text="v.finish">加载中...</td>
						<td class="right" v-text="v.notfinish">加载中...</td>
					</tr>
					<tr>
						<td class="center">合计：</td>
						<td colspan="2">表册数：{{volumecount}}册</td>
						<td class="right">{{sum}}</td>
						<td class="right">{{already}}</td>
						<td class="right">{{notnull}}</td>
						<td class="right">{{finish}}</td>
						<td class="right">{{notfinish}}</td>
					</tr>
					</tbody>
				</table>
				
		</div> <!-- .x12 -->
		
	</div> <!-- #content -->
	<script>

		var content=new Vue({
			el:"#content",
			data:{
				yearmonth:"",
				volume:"",
				volumecount:"",
				sum:"",
				already:"",
				finish:"",
				notnull:"",
				notfinish:"",
			},
			methods:{
				querybyYearMonth(){
					var yearmonth=$("#yearmonth").val();
					$.getJSON("/rd-read/queryVolumeAll",{"yearmonth":yearmonth},function(json){
						var sum=0;
						var i=0;
						var already=0;
						var notnull=0;
						var finish=0;
						var notfinish=0;
						content.$nextTick(() => {
							content.volume = json;
							$.each(json,function(){
								i=i+1;
								sum=sum+this.sum;
								already=already+this.already;
								finish=finish+this.finish;
								notnull=notnull+this.notnull;
								notfinish=notfinish+this.notfinish;
							})
							content.volumecount=i;
							content.sum=sum;
							content.already=already;
							content.finish=finish;
							content.notnull=notnull;
							content.notfinish=notfinish;
						})

					});
				}
			},
			created(){
				$.getJSON("/rd-yearmonth/queryall",function(data){
					content.yearmonth=data
				})
				$.getJSON("/rd-read/queryVolumeAll",function(json){
					var sum=0;
					var i=0;
					var already=0;
					var notnull=0;
					var finish=0;
					var notfinish=0;
					content.$nextTick(() => {
						content.volume = json;
						$.each(json,function(){
							i=i+1;
							sum=sum+this.sum;
							already=already+this.already;
							finish=finish+this.finish;
							notnull=notnull+this.notnull;
							notfinish=notfinish+this.notfinish;
						})
						content.volumecount=i;
						content.sum=sum;
						content.already=already;
						content.finish=finish;
						content.notnull=notnull;
						content.notfinish=notfinish;
					})

				});
			}
		});
	</script>
	<div id="footer">		
		<div class="content_pad">			
			<p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>.   技术支持 <a href="#">职业教育</a>.</p>
		</div> <!-- .content_pad -->
	</div> <!-- #footer -->
	
</div> <!-- #wrapper -->

<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
	
$(document).ready ( function () 
{
	Dashboard.init ();
	
});


</script>

</body> 
 
</html>